<template>
  <div class="LeftTree">
    <el-scrollbar>
      <el-tree :data="data" node-key="id" @node-click="handleNodeClick" :highlight-current="hightlight">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span v-show="!data.onFocus" class="custom-node-row">
            <div :class="node.level === 1 ? 'custom-label-one' : 'custom-label-other'" :title="node.label">
              {{ node.label }}
            </div>
            <div class="custom-btn">
              <i class="iconfont iconjiahao" @click="appendBtn(data)"></i>
              <el-popconfirm placement="top" popper-class="delete-confirm" :title="`确实要删除${node.label}吗？`" @confirm="removeBtn(node, data)">
                <i slot="reference" class="iconfont iconclose_cricle"></i>
              </el-popconfirm>
            </div>
          </span>
          <el-input
            ref="inputRef"
            v-if="data.onFocus"
            v-model.trim="model"
            placeholder="请输入名称"
            @blur="blurHandle(data)"
            @keyup.enter.native="blurHandle(data)"
          />
        </span>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
const dataTree = [
  {
    id: 1,
    onFocus: false,
    label: "一级 1名字特别长字特别长啊啊啊啊啊啊啊啊啊字特别长字特别长",
    children: [
      {
        id: 4,
        onFocus: false,
        label: "二级 1-1",
        children: [
          {
            id: 9,
            onFocus: false,
            label: "三级 1-1-1",
          },
          {
            id: 10,
            onFocus: false,
            label: "三级 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    onFocus: false,
    label: "一级 2",
    children: [
      {
        id: 5,
        onFocus: false,
        label: "二级 2-1",
      },
      {
        id: 6,
        onFocus: false,
        label: "二级 2-2",
      },
    ],
  },
  {
    id: 3,
    onFocus: false,
    label: "一级 3",
    children: [
      {
        id: 7,
        onFocus: false,
        label: "二级 3-1",
      },
      {
        id: 8,
        onFocus: false,
        label: "二级 3-2",
      },
    ],
  },
]
let id = 1000
export default {
  props: {
    value: {
      type: [String, Number],
    },
    hightlight: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      onFocus: false,
      model: "",
      data: JSON.parse(JSON.stringify(dataTree)),
    }
  },
  computed: {},
  methods: {
    // 新增按钮
    appendBtn(data) {
      this.model = ""
      data.onFocus = true
      this.$nextTick(() => {
        this.$refs.inputRef.focus()
      })
    },

    blurHandle(data) {
      if (!data.onFocus) return
      data.onFocus = false
      if (this.model === "") {
        this.$message({
          type: "warning",
          message: "请输入名称",
        })
        return
      }
      this.addHandle(data)
    },
    // 删除按钮
    removeBtn(node, data) {
      const parent = node.parent
      const children = parent.data.children || parent.data
      const index = children.findIndex(d => d.id === data.id)
      children.splice(index, 1)
    },
    // 新增操作
    addHandle(data) {
      const newChild = {
        id: id++,
        onFocus: false,
        label: this.model,
        children: [],
      }
      if (!data.children) {
        this.$set(data, "children", [])
      }
      data.children.push(newChild)
    },
    handleNodeClick(data) {
      this.$emit("update: hightlight", true)
      if (data.id !== this.value) {
        return
      }
      this.$emit("input", data.id)
      this.$emit("change")
    },
  },
}
</script>

<style lang="less">
.LeftTree {
  border: 1px solid #000;
  max-width: 312px;
  max-height: 400px;
  .el-scrollbar__wrap {
    height: 300px;
    overflow-y: auto;
  }
  .el-tree-node__content {
    height: 32px;
  }
  .custom-tree-node {
    .custom-node-row {
      display: flex;
      align-items: center;
      width: 180px;
      line-height: 32px;
      .custom-label-one {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
      }
      .custom-label-other {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 400;
      }
      .custom-btn {
        margin-left: 10px;
        display: none;
      }
      &:hover .custom-btn {
        display: block;
      }
      .iconjiahao {
        color: #0a94fe;
      }
      .iconclose_cricle {
        margin-left: 8px;
        color: red;
      }
    }
    .el-input__inner {
      height: 32px;
      width: 136px;
    }
  }
}
.delete-confirm {
  max-width: 200px;
}
</style>
